/**
 * 专题图层 - 山洪沟
 */
export default {
    data() {
        return {
        }
    },
    computed: {
        basin() {
            return this.$store.getters.basin
        }
    },
    watch: {
        basin: {
            handler: function (name) {
                this.$nextTick(() => {
                    this.creatSHG(name)
                })
            },
            immediate: true
        }
    },
    created() {
        this._dataSourceSHG = null
    },
    methods: {
        creatSHG(name) {
            this.clearSHG()
            if (this.layerList2[2].children.SHZHYSZQDC.children.SHG.show) {
                this._dataSourceSHG = new Cesium.CustomDataSource('PolylineDataSource')
                var url = `${mapConfig.resUrlPre}/geojson/${this.basin}/SHG.json`
                this.$axios.get(url).then(res => {
                    console.log(res.data)
                    console.log(res.data.features)
                    if (!res.data || !res.data || !res.data.features) {
                        console.log('没有找到数据', url)
                        return
                    }
                    res.data.features.forEach(feature => {
                        // console.log(feature)
                        var lonlats = []
                        if (feature.geometry.type === 'LineString') {
                            feature.geometry.coordinates.forEach(coordinate => {
                                lonlats.push(...coordinate)
                            })
                        } else if (feature.geometry.type === 'MultiLineString') {
                            feature.geometry.coordinates.forEach(coordinates => {
                                coordinates.forEach(coordinate => {
                                    lonlats.push(...coordinate)
                                })
                            })
                        } else {
                            console.log('An error occurred')
                        }

                        var polylineEntity = {
                            eventName: '山洪沟',
                            prop: feature.properties,
                            polyline: {
                                positions: Cesium.Cartesian3.fromDegreesArray(lonlats),
                                width: 10,
                                material: Cesium.Color.fromCssColorString('RGBA(191, 191, 191, 1)'),
                                clampToGround: true,
                                classificationType: Cesium.ClassificationType.BOTH // BOTH  or TERRAIN
                            }
                        }
                        this._dataSourceSHG.entities.add(polylineEntity)
                    })
                    this.$viewer.dataSources.add(this._dataSourceSHG)
                    this.initEvevtSHG()
                })
            } else {
                this.clearSHG()
            }
        },
        initEvevtSHG() {
            var eventFn = pickedObject => {
                // console.log("点击", pickedObject.id.prop)
                if (
                    pickedObject &&
                    pickedObject.id &&
                    pickedObject.id.eventName

                ) {
                    if (pickedObject.id.eventName === '山洪沟') {
                        const dlgParams = this.$store.getters.dlgParams

                        dlgParams.name = '山洪沟'

                        dlgParams.params = {
                            properties:pickedObject.id.prop,
                            id: this.basin, // 流域编码

                        }
                        this.$store.dispatch('dlgParams', dlgParams)
                    }
                }
            }
            var eventCesiumOption = this.$store.getters.eventCesiumOption
            eventCesiumOption.leftPickFns.set('山洪沟', eventFn)
        },
        clearSHG() {
            if (this._dataSourceSHG) this.$viewer.dataSources.remove(this._dataSourceSHG)
        }
    }
}
